<!DOCTYPE html>

<html>
  <head>
    <title>Orientation Manager</title>
    
<!--
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
-->

<script src="../jslayout-orientation.js"></script>
<script src="_examples.js"></script>
<script src="sizzle/sizzle.js"></script>
    
<style>

h1 {
font-family: "Tahoma", sans-serif;
}

#row {
border: 1px solid #aaa;
background: #ccc;
display: block;
font-size: 0.8em;
}

#row, #row li {
padding: 0;
margin: 0;
list-style: none;
display: block;
}

#row li {
margin: 1em 0.75em;
padding: 0.5em 1.5em;
border: 2px solid #444;
width: 275px;
}


</style>

    <script>

// main script
onContent(function () {
	// node reference
	var row = document.getElementById('row');

	// orientation
	var manager = new OrientationManager(document);
	manager.setOrientation(row, 'horizontal');
//	manager.setOrientation(row, 'vertical');
});
    
    </script>
  </head>
  
  <body>
<h1>JSLayout Orientation Manager</h1>
<p>The following is a horizontal row, which is fully contained in its parent box, well beyond the width of the page. Note that you can horizontally scroll to see the remainder of the content, making horizontally-oriented pages possible. (Good news for fans of the <a href="http://thehorizontalway.com">the Horizontal Way</a>!)</p>

<ul id="row">
<li style="background: #4ff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt placerat tellus. Etiam dictum condimentum egestas. Sed imperdiet, diam a auctor rutrum, nisl dolor auctor lorem, vel volutpat enim turpis vitae lorem. Quisque gravida tempus ipsum, et cursus ante laoreet hendrerit. Nunc augue risus, vestibulum scelerisque sagittis vitae, blandit congue metus. Nunc ut lacus massa. Suspendisse egestas felis eget metus hendrerit pellentesque rhoncus tellus posuere. In quis odio metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nisi metus, interdum at rutrum aliquet, porttitor non tortor. Maecenas leo purus, faucibus elementum egestas ut, convallis non dolor. Nulla pretium, risus at interdum mattis, mi elit tincidunt ligula, quis pulvinar nulla ipsum sit amet justo. Praesent congue egestas sem in rhoncus. Donec dignissim auctor orci. Vivamus ante mi, scelerisque ut viverra in, ultrices blandit dolor. Nulla in orci id orci mollis placerat. Maecenas velit ipsum, tempor a dignissim non, elementum ut lorem. 
</li>
<li style="background: #4f4">
Donec a quam et urna pulvinar interdum. Pellentesque sed augue ipsum. Vivamus mattis ultricies euismod. In ultrices quam eget tellus dignissim eleifend. Vivamus a iaculis ante. Curabitur semper rutrum mauris, vitae iaculis enim euismod ut. Donec hendrerit, urna vitae sodales lacinia, est justo euismod enim, eget congue mi tellus quis mauris. Sed non egestas turpis. Nam venenatis rhoncus elit et tincidunt. Proin placerat, neque at lobortis ornare, lectus massa blandit eros, quis lacinia magna erat et nunc. Integer pulvinar augue at nibh condimentum tincidunt. 
</li>
<li style="background: #77f">
Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla, justo ac tincidunt volutpat, nisi purus pellentesque tortor, posuere volutpat odio ipsum vitae ligula. Ut aliquam, justo ut faucibus vulputate, elit eros interdum lorem, non cursus quam ante in felis. Praesent consequat justo sed dui elementum ac vehicula mi condimentum. Proin egestas, leo quis fringilla facilisis, orci metus imperdiet lacus, sed eleifend diam sapien eget augue. Praesent odio justo, interdum vel consectetur ac, mollis nec lorem. Ut consequat, diam vitae tempor feugiat, urna nunc fermentum ante, eget accumsan massa mi id metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque neque nunc, fringilla sed cursus in, elementum eu neque. Phasellus magna quam, molestie ac feugiat id, egestas vitae purus. Nam a mauris eget arcu euismod posuere. Donec nibh augue, semper a fermentum sit amet, facilisis at quam. 
</li>
<li style="background: #f55">
Fusce eget enim urna. Nam auctor, eros id venenatis sodales, est ante placerat dui, nec egestas felis tortor ac erat. Nam pellentesque ipsum at mi fringilla ornare. Suspendisse massa odio, ultrices sed dapibus at, tempor id ante. Phasellus et malesuada massa. Pellentesque nec magna mi, ut pellentesque nisl. Aenean faucibus mattis dolor id viverra. Nunc massa metus, venenatis vehicula aliquet quis, sagittis a risus. Sed ac ante nec turpis lacinia varius. Integer eget mi sed dui imperdiet consectetur. Fusce ante leo, tristique elementum sollicitudin ut, interdum non dolor. Duis pharetra molestie purus et aliquam. Nullam condimentum pellentesque fermentum. Duis at fringilla tellus. Praesent eu tortor turpis, id fermentum libero.
Sed eu augue nec justo pellentesque imperdiet vel ac lectus. Nullam pellentesque sem vitae justo viverra ut lacinia mi rutrum. In a odio est. Praesent ac metus orci, non mollis massa. In ornare consequat sodales. Curabitur bibendum posuere mollis. Aliquam neque erat, egestas a blandit id, fermentum nec urna. Ut ut tortor vitae magna auctor blandit. Nullam tortor tortor, aliquet id condimentum nec, aliquet vitae magna. Cras tincidunt felis ut felis interdum non fringilla ante ultricies. Nulla facilisi. Morbi eget tortor tellus, in eleifend purus. Proin malesuada fermentum mi et fringilla. Sed viverra enim et ligula dignissim in tincidunt lacus lacinia. Praesent venenatis hendrerit nisi, ut rhoncus urna gravida volutpat. Nunc porta adipiscing pretium. Vivamus lobortis tincidunt ipsum, sit amet ullamcorper magna molestie vel. Sed leo lorem, pretium eget dignissim eget, mattis at eros. Nam auctor, erat ut tincidunt facilisis, turpis elit elementum est, id tincidunt augue urna sed nulla. Duis aliquam pharetra nulla vitae egestas. 
</li>
<li style="background: #77f">
Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla, justo ac tincidunt volutpat, nisi purus pellentesque tortor, posuere volutpat odio ipsum vitae ligula. Ut aliquam, justo ut faucibus vulputate, elit eros interdum lorem, non cursus quam ante in felis. Praesent consequat justo sed dui elementum ac vehicula mi condimentum. Proin egestas, leo quis fringilla facilisis, orci metus imperdiet lacus, sed eleifend diam sapien eget augue. Praesent odio justo, interdum vel consectetur ac, mollis nec lorem. Ut consequat, diam vitae tempor feugiat, urna nunc fermentum ante, eget accumsan massa mi id metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque neque nunc, fringilla sed cursus in, elementum eu neque. Phasellus magna quam, molestie ac feugiat id, egestas vitae purus. Nam a mauris eget arcu euismod posuere. Donec nibh augue, semper a fermentum sit amet, facilisis at quam. 
</li>
<li style="background: #4ff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt placerat tellus. Etiam dictum condimentum egestas. Sed imperdiet, diam a auctor rutrum, nisl dolor auctor lorem, vel volutpat enim turpis vitae lorem. Quisque gravida tempus ipsum, et cursus ante laoreet hendrerit. Nunc augue risus, vestibulum scelerisque sagittis vitae, blandit congue metus. Nunc ut lacus massa. Suspendisse egestas felis eget metus hendrerit pellentesque rhoncus tellus posuere. In quis odio metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nisi metus, interdum at rutrum aliquet, porttitor non tortor. Maecenas leo purus, faucibus elementum egestas ut, convallis non dolor. Nulla pretium, risus at interdum mattis, mi elit tincidunt ligula, quis pulvinar nulla ipsum sit amet justo. Praesent congue egestas sem in rhoncus. Donec dignissim auctor orci. Vivamus ante mi, scelerisque ut viverra in, ultrices blandit dolor. Nulla in orci id orci mollis placerat. Maecenas velit ipsum, tempor a dignissim non, elementum ut lorem. 
</li>
<li style="background: #4ff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt placerat tellus. Etiam dictum condimentum egestas. Sed imperdiet, diam a auctor rutrum, nisl dolor auctor lorem, vel volutpat enim turpis vitae lorem. Quisque gravida tempus ipsum, et cursus ante laoreet hendrerit. Nunc augue risus, vestibulum scelerisque sagittis vitae, blandit congue metus. Nunc ut lacus massa. Suspendisse egestas felis eget metus hendrerit pellentesque rhoncus tellus posuere. In quis odio metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nisi metus, interdum at rutrum aliquet, porttitor non tortor. Maecenas leo purus, faucibus elementum egestas ut, convallis non dolor. Nulla pretium, risus at interdum mattis, mi elit tincidunt ligula, quis pulvinar nulla ipsum sit amet justo. Praesent congue egestas sem in rhoncus. Donec dignissim auctor orci. Vivamus ante mi, scelerisque ut viverra in, ultrices blandit dolor. Nulla in orci id orci mollis placerat. Maecenas velit ipsum, tempor a dignissim non, elementum ut lorem. 
</li>
<li style="background: #4f4">
Donec a quam et urna pulvinar interdum. Pellentesque sed augue ipsum. Vivamus mattis ultricies euismod. In ultrices quam eget tellus dignissim eleifend. Vivamus a iaculis ante. Curabitur semper rutrum mauris, vitae iaculis enim euismod ut. Donec hendrerit, urna vitae sodales lacinia, est justo euismod enim, eget congue mi tellus quis mauris. Sed non egestas turpis. Nam venenatis rhoncus elit et tincidunt. Proin placerat, neque at lobortis ornare, lectus massa blandit eros, quis lacinia magna erat et nunc. Integer pulvinar augue at nibh condimentum tincidunt. 
</li>
<li style="background: #77f">
Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla, justo ac tincidunt volutpat, nisi purus pellentesque tortor, posuere volutpat odio ipsum vitae ligula. Ut aliquam, justo ut faucibus vulputate, elit eros interdum lorem, non cursus quam ante in felis. Praesent consequat justo sed dui elementum ac vehicula mi condimentum. Proin egestas, leo quis fringilla facilisis, orci metus imperdiet lacus, sed eleifend diam sapien eget augue. Praesent odio justo, interdum vel consectetur ac, mollis nec lorem. Ut consequat, diam vitae tempor feugiat, urna nunc fermentum ante, eget accumsan massa mi id metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque neque nunc, fringilla sed cursus in, elementum eu neque. Phasellus magna quam, molestie ac feugiat id, egestas vitae purus. Nam a mauris eget arcu euismod posuere. Donec nibh augue, semper a fermentum sit amet, facilisis at quam. 
</li>
<li style="background: #f55">
Fusce eget enim urna. Nam auctor, eros id venenatis sodales, est ante placerat dui, nec egestas felis tortor ac erat. Nam pellentesque ipsum at mi fringilla ornare. Suspendisse massa odio, ultrices sed dapibus at, tempor id ante. Phasellus et malesuada massa. Pellentesque nec magna mi, ut pellentesque nisl. Aenean faucibus mattis dolor id viverra. Nunc massa metus, venenatis vehicula aliquet quis, sagittis a risus. Sed ac ante nec turpis lacinia varius. Integer eget mi sed dui imperdiet consectetur. Fusce ante leo, tristique elementum sollicitudin ut, interdum non dolor. Duis pharetra molestie purus et aliquam. Nullam condimentum pellentesque fermentum. Duis at fringilla tellus. Praesent eu tortor turpis, id fermentum libero.
Sed eu augue nec justo pellentesque imperdiet vel ac lectus. Nullam pellentesque sem vitae justo viverra ut lacinia mi rutrum. In a odio est. Praesent ac metus orci, non mollis massa. In ornare consequat sodales. Curabitur bibendum posuere mollis. Aliquam neque erat, egestas a blandit id, fermentum nec urna. Ut ut tortor vitae magna auctor blandit. Nullam tortor tortor, aliquet id condimentum nec, aliquet vitae magna. Cras tincidunt felis ut felis interdum non fringilla ante ultricies. Nulla facilisi. Morbi eget tortor tellus, in eleifend purus. Proin malesuada fermentum mi et fringilla. Sed viverra enim et ligula dignissim in tincidunt lacus lacinia. Praesent venenatis hendrerit nisi, ut rhoncus urna gravida volutpat. Nunc porta adipiscing pretium. Vivamus lobortis tincidunt ipsum, sit amet ullamcorper magna molestie vel. Sed leo lorem, pretium eget dignissim eget, mattis at eros. Nam auctor, erat ut tincidunt facilisis, turpis elit elementum est, id tincidunt augue urna sed nulla. Duis aliquam pharetra nulla vitae egestas. 
</li>
<li style="background: #77f">
Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla, justo ac tincidunt volutpat, nisi purus pellentesque tortor, posuere volutpat odio ipsum vitae ligula. Ut aliquam, justo ut faucibus vulputate, elit eros interdum lorem, non cursus quam ante in felis. Praesent consequat justo sed dui elementum ac vehicula mi condimentum. Proin egestas, leo quis fringilla facilisis, orci metus imperdiet lacus, sed eleifend diam sapien eget augue. Praesent odio justo, interdum vel consectetur ac, mollis nec lorem. Ut consequat, diam vitae tempor feugiat, urna nunc fermentum ante, eget accumsan massa mi id metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque neque nunc, fringilla sed cursus in, elementum eu neque. Phasellus magna quam, molestie ac feugiat id, egestas vitae purus. Nam a mauris eget arcu euismod posuere. Donec nibh augue, semper a fermentum sit amet, facilisis at quam. 
</li>
<li style="background: #4ff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt placerat tellus. Etiam dictum condimentum egestas. Sed imperdiet, diam a auctor rutrum, nisl dolor auctor lorem, vel volutpat enim turpis vitae lorem. Quisque gravida tempus ipsum, et cursus ante laoreet hendrerit. Nunc augue risus, vestibulum scelerisque sagittis vitae, blandit congue metus. Nunc ut lacus massa. Suspendisse egestas felis eget metus hendrerit pellentesque rhoncus tellus posuere. In quis odio metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nisi metus, interdum at rutrum aliquet, porttitor non tortor. Maecenas leo purus, faucibus elementum egestas ut, convallis non dolor. Nulla pretium, risus at interdum mattis, mi elit tincidunt ligula, quis pulvinar nulla ipsum sit amet justo. Praesent congue egestas sem in rhoncus. Donec dignissim auctor orci. Vivamus ante mi, scelerisque ut viverra in, ultrices blandit dolor. Nulla in orci id orci mollis placerat. Maecenas velit ipsum, tempor a dignissim non, elementum ut lorem. 
</li>
</ul>

  </body>
</html>